<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>

    <style>
        div {
            border: 1px solid #aaa;
        }
        #container {
            width: 500px;
            height: 500px;
            position: relative;  /*相对位置*/
        }
        #box {
            width: 20px;
            height: 20px;
            position: absolute;  /*绝对位置*/
            top: 20px;
            left: 20px;
        }
    </style>

</head>

<body>
<ol>
    <li>创建这边两个div,并写好相关样式</li>
    <li>理解动画效果的原理,改变top和left的值</li>
</ol>
<div id="container">
    <div id="box">
        正
    </div>
</div>

<script>
    // console.log(window);
    
    let boxItem = document.getElementById("box");
    let boxItemTop = 0, boxItemLeft = 0;
    // for (let i = 0; i < 1000; i++){
    //     boxItem.style.top = boxItemTop + "px";
    //     boxItem.style.left = boxItemLeft + "px";
    //
    //     boxItemTop += 10;
    //     boxItemLeft += 10;
    //
    //     if (boxItemTop >= 483){
    //         break;
    //     }
    //     if (boxItemTop === 480){
    //         boxItemTop = 478;
    //     }
    //     if (boxItemLeft === 480){
    //         boxItemLeft = 478;
    //     }
    // }   //直接到底
    let timer = setInterval(function () {
        boxItem.style.top = boxItemTop + "px";
        boxItem.style.left = boxItemLeft + "px";

        boxItemTop += 5;
        boxItemLeft += 5;

        if (boxItemTop >= 483){
            clearInterval(timer)
        }
        if (boxItemTop === 480){
            boxItemTop = 478;
        }
        if (boxItemLeft === 480){
            boxItemLeft = 478;
        }
    }, 50);


</script>
</body>
</html>